<template>
	<view class="content">
		<up-search placeholder="搜索景点" v-model="keyword" bg-color="#e3e3e3"></up-search>
	 <up-swiper
	 v-if="bannerList.length"
	            :list="bannerList"
				keyName="image"
	           radius="8"
			   autoplay="true"
			   height="160"
			   show-title
	    ></up-swiper>
		 <up-notice-bar text="展示静态数据占位" ></up-notice-bar>
		 <!-- 瀑布流效果 -->
		 <view class="list">
		 	<up-waterfall v-model="flowList" columns="2">
		 		<template v-slot:column="{colList, colIndex}">
		 			<view class="demo-warter" v-for="(item, index) in colList" :key="index" @click="goDetail(item)">
		 				<up-lazy-load threshold="-450" border-radius="10" :image="item.img" :index="index"></up-lazy-load>
						<view class="demo-title">
							{{item.title}}
						</view>
						<view class="demo-price">
							{{item.times}}
						</view>
						<view class="tag">
							<view class="damo-tag-one">
								{{item.tag[0]}}
							</view>
							<view class="damo-tag-two">
								{{item.tag[1]}}
							</view>
						</view>
						<view class="isDot" v-if="item.isDot">
							{{item.isDot}}
						</view>
					</view>
		 		</template>
		 	</up-waterfall>
		 </view>
		 	<view class="topClass"  v-if="showTopBtn" @click="toTop">
		 		<up-icon name="arrow-upward" color="#fff" size="28"></up-icon>
		 	</view>
		 </view>
	
		
</template>

<script setup>
	import {onLoad,onReachBottom,onPageScroll} from '@dcloudio/uni-app'
	import {getBanner,getHomeList} from '../../api/api.js'
	import { ref } from 'vue'
	const keyword=ref('')
	// 首页banner数据
	const bannerList=ref([])
	// 瀑布流数据
	const flowList=ref([])
	// 监听滚动页面滚动距离
	const showTopBtn=ref(0)
	// 页面首次加载时触发
	onLoad(
	()=>{
		// 获取首页banner数据
		getBanner().then(res=>{
			bannerList.value=res.bannerList
		});
		// 获取首页瀑布流列表数据
		getHomeList().then(res=>{
			flowList.value=res
		});
	}
	)
	// 页面触底时触发
	onReachBottom(
	()=>{
		setTimeout(()=>{addRandomData()},1000)
	}
	)
	onPageScroll(
	(e)=>{
		if(e.scrollTop>400){
			showTopBtn.value=1
		}else{
			showTopBtn.value=0
		}
	}
	)
	const addRandomData=()=>{
		for(let i=0;i<10;i++){
			let index = uni.$u.random(0,flowList.value.length-1)
			let item=JSON.parse(JSON.stringify(flowList.value[index]))
			item.id=uni.$u.guid()
			flowList.value.push(item)
		}
	}
	// 点击返回顶部
	const toTop=()=>{
		uni.pageScrollTo({
			scrollTop:0,
			duration:300
		})
	}
	const goDetail=(item)=>{
		const can=JSON.stringify(item)
		uni.navigateTo({
			url:`/pages/detail/detail?item=${encodeURIComponent(can)}`
		})
	}
</script>
<style>
	page{
		background-color: rgb(240, 240, 240);
	}
</style>
<style lang="scss" scoped>
	.content {
	padding: 20rpx 20rpx;
	}
.list{
	margin: 30rpx 0;
	.demo-warter{
		margin: 5rpx 5rpx 5rpx 0;
		background-color: #fff;
		border-radius: 16rpx;
		padding: 14rpx;
		position: relative;
		.demo-title{
			font-size: 30rpx;
			margin-top: 10rpx;
			color:#303133
		}
		.demo-price{
			font-size: 22rpx;
			color: #777;
			margin-top: 10rpx;
		}
		.tag{
			display: flex;
			margin-top: 10rpx;
			margin-bottom: 20rpx;
			.damo-tag-one{
				border: 1rpx solid rgb(252,163,169);
				color: #ffaa00;
				font-size: 20rpx;
				display: flex;
				align-items: center;
				padding: 4rpx 14rpx;
				border-radius: 50rpx;
			}
			.damo-tag-two{
				border: 1rpx solid #00aaff;
				color: #00aaff;
				margin-left:20rpx;
				border-radius: 50rpx;
				padding: 4rpx 14rpx;
				font-size: 20rpx;
				display: flex;
				align-items: center;
				
			}
	}
	.isDot{
		position:absolute;
		top:16rpx;
		right: 16rpx;
		color: #fff;
		line-height: 32rpx;
		background-color: #ff0000;
		text-align: center;
		border-radius: 10rpx;
		padding: 4rpx 10rpx;
	}

}

}	
.topClass{
	position:fixed;
	bottom: 120rpx;
	right: 30rpx;
	background-color: rgba(0, 0, 0, 0.5);
	padding: 20rpx;
	width: 44rpx;
	height: 44rpx;
	border-radius:40rpx ;
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>
